{extend name="base" /}
{block name="css"}
<style>
    #dictTable + .layui-table-view .layui-table-tool-temp {
        padding-right: 0;
    }
    #dictTable + .layui-table-view .layui-table-body tbody > tr td {
        cursor: pointer;
    }
    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
        background-color: #fff3e0;
    }
    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
        position: absolute;
        right: 6px;
        content: "\e602";
        font-size: 12px;
        font-style: normal;
        font-family: layui-icon !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

</style>
{/block}
{block name="body"}
<div class="layui-col-md3">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格1 -->
        <table id="dictTable" lay-filter="dictTable"></table>
    </div>
</div>
<div class="layui-col-md9">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格2 -->
        <table id="dictDataTable" lay-filter="dictDataTable"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableTBTrack">
            <a href="{:url('user/field/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="494px" data-height="484px">修改</a>
            <a href="{:url('user/field/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="sort_order">
            <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('user/field/edit')}?id={{d.id}}">
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="启用|禁用" data-url="{:url('user/field/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="required">
            <input type="checkbox" name="is_required" lay-skin="switch" lay-filter="*" lay-text="必填|非必填" data-url="{:url('user/field/edit')}?id={{d.id}}" {{d.is_required==1?'checked':''}}>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="is_sys">
            {{# if(d.is_sys == '1'){ }}
            <button class="layui-btn layui-btn-danger layui-btn-xs">系统</button>
            {{# }else{ }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">其他</button>
            {{# } }}
        </script>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var selObj;  // 左表选中数据
        var newid = layui.data('fieldid');
        var leftid = newid.id ? newid.id : 0;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#dictTable',
            url: "{:url('user/field/get_field')}",
            height: 'full-70',
            defaultToolbar: [],
            cols: [[
                {type: 'numbers'},
                {field: 'fieldName', title: '自定义分类'}
            ]],
            done: function (res, curr, count) {
                $('#dictTable+.layui-table-view .layui-table-body tbody>tr:eq('+ leftid +')').trigger('click');
            }
        });

        /* 监听行单击事件 */
        table.on('row(dictTable)', function (obj) {
            selObj = obj;
            layui.data('fieldid', {key: 'id',value:obj.data.leftid});
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            insTb2.reload({where: {field_id: obj.data.fieldId}, page: {curr: 1}, url: '{:url('user/field/index_json')}'});
        });
        
        /* 渲染表格2 */
        var insTb2 = table.render({
            elem: '#dictDataTable',
            data: [],
            height: 'full-70',
            limit:'15',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="default" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe9aa;</i>初始化字段</button>&nbsp;',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers',title:'#'},
                {align: 'left', sort: true, title: '#',templet:'#is_sys',width:70},
                {field: 'title', align: 'left', sort: true, title: '标题'},
                {field: 'name', align: 'left', sort: true, title: '标识'},
                {field: 'type', align: 'left', sort: true, title: '类型'},
                {field: 'value', align: 'left', sort: true, title: '默认值'},
                {align: 'center', sort: true, title: '排序',templet:'#sort_order'},
                {align: 'center', sort: true, title: '状态',templet:'#status'},
                {align: 'center', sort: true, title: '必填',templet:'#required'},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作',width:135}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            },
        });

        /* 表格2头工具栏点击事件 */
        table.on('toolbar(dictDataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                var title = $(this).html();
                var index = layer.open({
                    title: title,
                    type: 2,
                    anim: 0,
                    shadeClose:true,
                    area: ['494px', '484px'],
                    content: "{:url('user/field/add')}?field_id=" + obj.config.where.field_id,
                })
                return false;
            } else if (obj.event === 'default') { // 更新
                var index = layer.msg('请求中，请稍候', {
                    icon: 16,
                    time: false,
                    shade: 0.3
                });
                $.ajax({
                    url: "{:url('user/field/default')}?field_id=" + obj.config.where.field_id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.close(index);
                        layer.msg(result.msg);
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.close(index);
                        layer.msg(state + '：' + errorThrown);
                    }
                });
                return false;
            }
        });

    });
</script>
{/block}